<script setup>
import {onMounted, reactive} from "vue";
import axios from "axios";
import {useRouter} from "vue-router";
const router=useRouter();
document.title = "新闻资讯"

// 随机生成一个随机函数
const authid = Math.random().toString();
console.log(localStorage.getItem('userLoginToken'))

// console.log(authid)
const localDate = reactive({
   title: "", content: "", authid: authid, authcode: ""
})

function submitData() {
  if (localDate.title !== "" && localDate.content !== "") {
    if (window.confirm("提示：确认要发布新资讯吗？")) {
      axios({
        url: "http://1.116.198.235/article/api/zxnews.php?type=add",
        method: "POST",
        headers:{
          'Content-Type': 'application/json', //请求头内容为JSON
          'Authorization': localStorage.getItem('userLoginToken'),
        },
        data:{
          ...localDate
        }
      }).then(result => {
        console.log(result)
        console.log(result.data.code)
        if (result.data.code === "ok") {
          alert("提示：资讯发布成功!")
          router.push('/list')
        } else if (result.data.code === "error2") {
          alert("提示：验证码错误!")
          console.log(result.data.code)
        } else if (result.data.code === "error1") {
          alert("提示：添加失败!")
        }
      }).catch(error => {
        // 处理错误，例如，显示错误消息
        console.error('错误：', error);
      })
    }
  } else {
    alert("提示：请输入标题或内容！")
  }
}


function authPic() {
  // 随机生成验证码的url地址
  document.getElementById("http").src = "http://1.116.198.235/article/api/authimg.php?ssid=" + authid;
}

// 等待html加载完再执行
onMounted(function () {
  authPic();
})

</script>

<template>
  <div class="information">
    <img class="tuz" src="../../../public/images/兔子.png" alt="">
    <img class="cao" src="../../../public/images/草地.png" alt="">
    <div class="bg">
      <h3 class="h3">新增资讯</h3>
      <hr>
      <div class="publish">
        <header><input v-model.lazy="localDate.title" type="text" name="" id="" placeholder="请输入标题"></header>
        <div class="new-body">
          <textarea v-model.lazy="localDate.content" name="" id="textarea" cols="30" rows="10"  placeholder="请留下您的痕迹"></textarea>
          <!-- 验证码 -->
          <div class="form-group-y">
            <label class="sr-only" for="exampleInputEmail3">验证码</label>
            <input v-model.lazy="localDate.authcode" maxlength="4" type="text" class="form-control"
                   id="exampleInputEmail3" placeholder="请输入验证码">
            <span class="yan"><img id="http" alt="验证码" @click="authPic" style="cursor: pointer;" src=""></span>
          </div>
          <div class="form-group">
            <div class="col-6">
              <button type="button" class="btn btn-info" @click="submitData">提交</button> &nbsp;
              <button type="button" class="btn btn-info" @click="router.push('/list')">返回</button>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<style scoped>
.information {
  height: 100vh;
  background-size: 20%;
  position: relative;

}
.information>.tuz{
  position: absolute;
  top: 597px;
  left: 268px;
}
.information >.cao {
  position: absolute;
  top: 680px;
  width: 100%;
  height: 200px;
  z-index: 0;
}
.bg {
  margin: 20px auto;
  width: 750px;
}
.h3 {
  width: 120px;
  color: #1d6f5d;
  font-weight: 700;
  font-family: "Arial Narrow" ,serif;
  margin: 10px auto;
}

hr {
  width: 80%;
  margin: 0 auto;
  border: 1px solid #000000;
}

.publish {
  width: 675px;
  height: 484px;
  margin: 20px auto;
}

header {
  width: 100%;
  height: 55px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  background-color: #799757;
}

header input {
  width: 80%;

  height: 35px;
  margin: 10px 10%;
  border: 1px solid black;
  border-radius: 5px;
}

.new-body {
  width: 673px;
}


#textarea {
  width: 675px;
  height: 400px;
  border: 0;
  background-size: 20%;
  background: linear-gradient(to bottom, #D6E9A9, rgba(255, 255, 255, 0.55)) ,url("../../../public/images/小动物.png") no-repeat  bottom;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.form-group-y {
  position: relative;
  width: 250px;
  margin: 16px 41px;
}

.yan {
  position: absolute;
  display: block;
  top: 30px;
  left: 270px;
}

.form-group {
  margin: 10px 40px;
}
</style>